<template>
    <div>
        <div class="header">
            <van-nav-bar title="密码修改" @click-left="$router.push('/home')">
                <template #left>
                    <van-icon name="arrow-left" size="25" color='black' />
                </template>
            </van-nav-bar>
        </div>

        <van-cell-group border>
            <van-field v-model="password" :type="flags ? 'password' : 'text'" label="原始密码" placeholder="请输入密码..."
                @click-right-icon="flags = !flags" :right-icon="flags ? 'closed-eye' : 'eye-o'" />
        </van-cell-group>


        <van-cell-group border>
            <van-field v-model="password1" :type="flags ? 'password' : 'text'" label="修改密码" placeholder="请输入密码..."
                @click-right-icon="flags = !flags" :right-icon="flags ? 'closed-eye' : 'eye-o'" />
        </van-cell-group>


        <van-cell-group border>
            <van-field v-model="password2" :type="flags ? 'password' : 'text'" label="确认密码" placeholder="请输入密码..."
                @click-right-icon="flags = !flags" :right-icon="flags ? 'closed-eye' : 'eye-o'" />
        </van-cell-group>

        <div class="loginbtn">
            <van-button :disabled="flag" round block type="danger" @click="login">确认修改</van-button>
        </div>
    </div>
</template>

<script>
import { updatePassord } from "../../api/user";
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    data() {
        return {
            password: '',
            password1: '',
            password2: '',
            flags: true,
        }
    },
    methods: {
        login() {
            updatePassord({ userid: localStorage.getItem("userid"), oldpassword: localStorage.getItem("password"), newpasswor: this.password1 }).then(res => {
                console.log(res);
                switch (res.data.code) {
                    case '10030':
                        Toast('原始密码错误');
                        break;
                    case '200':
                        Toast('修改成功');
                        this.$router.push('/my')
                        break;
                    default:
                        break;
                }

                if (this.password1 !== this.password2) {
                    Toast('密码不一致');
                }
            })
        }
    },
    // created() {
    //     updatePassord({ userid: localStorage.getItem("userid"), oldpassword: localStorage.getItem("password"), newpasswor: this.password1 }).then(res => {
    //         console.log(res);
    //     })
    // },
    computed: {
        flag() {
            if (this.password || this.password1) {
                return false
            } else {
                return true
            }
        }
    }
}
</script>

<style scoped>
.loginbtn {
    width: 80%;
    margin: 20px auto;
}
</style>